<script>
import { getDetailFission } from '@/api/task'
import { getQueryValue, getWxCode } from '@/utils/index.js'
export default {
  name: '',
  components: {},
  data() {
    return {
      poster: '',
      query: {
        unionid: '',
        fissionId: '',
      },
    }
  },
  computed: {},
  watch: {},
  created() {
    this.$toast.loading()
    getWxCode()
      .then(({ openId, unionId, avatar }) => {
        if (unionId) {
          this.query.unionid = unionId
          this.query.fissionId = this.$route.query.id
          getDetailFission(this.query)
            .then((res) => {
              this.poster = res.data.fissionPosterUrl
            })
            .finally(() => {
              this.$toast.clear()
            })
        } else {
          this.$toast.clear()
        }
      })
      .catch(() => {
        // this.$toast('授权异常，请刷新重试')
      })
  },
  mounted() {},
  methods: {
    tip() {
      this.$dialog
        .alert({
          title: '分享图片提示',
          message: '长按图片，在弹出菜单中“发送给朋友”或者可“保存图片”分享至朋友圈',
          getContainer: '.myStyle',
        })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
      // this.$toast('长按图片在弹出菜单中发送给朋友或者可保存图片分享至朋友圈')
    },
    goDetail() {
      this.$router.push({
        path: '/taskProcess',
        query: { ...this.query, poster: this.poster },
      })
    },
  },
}
</script>

<template>
  <div class="container">
    <img :src="poster" class="posterImg" />
    <div class="footerLink">
      <div class="sharePic" @click="tip">分享图片</div>
      <div class="myTaskDetail" @click="goDetail">我的邀请任务进度</div>
    </div>
    <div class="myStyle"></div>
  </div>
</template>

<style lang="less" scoped>
.myStyle /deep/ .van-dialog__header {
  font-size: 17px;
  font-weight: 500;
  color: #1d2129;
}
.myStyle /deep/ .van-dialog__message {
  font-size: 15px;
  font-weight: 400;
  color: #4e5969;
}
/deep/ .van-button__text {
  font-size: 18px;
  font-weight: 400;
  color: #07c160;
}
.container {
  padding-bottom: 72px;
}
.footerLink {
  height: 72px;
  width: 100%;
  background-color: #ffffff;
  position: fixed;
  // left: 50%;
  // transform: translateX(-50%);
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 13px;
  box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.24);
}
.sharePic {
  width: 164px;
  height: 48px;
  line-height: 48px;
  background: linear-gradient(90deg, #07c160 0%, #90de45 99%);
  border-radius: 8px 8px 8px 8px;
  text-align: center;
  font-size: 18px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
}
.myTaskDetail {
  width: 164px;
  height: 48px;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #07c160;
  line-height: 48px;
  text-align: center;
  font-size: 18px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #07c160;
}
</style>
